<template name="poup">
	<view class="poupMask" :class="[animation?'ani':'']" v-if="isShow"  @tap.self="tapMask">
		<view class="poupBox" @tap.stop>
			<text class="poupTitle" v-if="title">{{title}}</text>
			<view class="poupContent" v-if="cntText">{{cntText}}</view>
			<view class="poupCntSlot" v-if="isCntSlot" :style="{'max-height':maxHeight+'px'}">
				<slot name="cntSlot"></slot>
			</view>
			<view class="btnGroun">
				<button class="closeBtn" v-if="cancle" @tap.stop="cancleTap">{{cancle}}</button>
				<button class="confirmBtn" v-if="confirm" @tap.stop="confirmTap">{{confirm}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'poup', //组件名称
		// 传递参数
		props: {
			isCntSlot:{			//是否有插槽自定义内容
				type:Boolean,
				default:false
			}
		},
		// 组件参数
		data() {
			return {
				isShow: false,		//是否显示
				title:'提示',		//标题文字
				cntText:'提示内容提示内容提示内容提示内容提示内容',			//提示详细信息
				cancle:'取消',		//取消按钮文字
				confirm:'确认',		//确认按钮文字
				maskClose:true,		//是否可以点击遮罩层关闭
				cancleFcn:null,		//取消按钮点击执行方法
				confirmFcn:null,	//确认按钮点击方法
				animation:false,	//动画状态
				maxHeight:(uni.getSystemInfoSync().windowHeight-uni.upx2px(272)-uni.getSystemInfoSync().statusBarHeight)*0.8		//有自定义插槽内容时，内容区域的最大高度，超出会scroll
			}
		},
		watch: {
			isShow(newValue) {
				if (newValue) {
					this.show()
				} else {
					this.close()
				}
			}
		},
		// 组件方法
		methods: {
			// 显示
			show() {
				this.isShow = true;
				setTimeout(()=>{
					this.animation=true
				},30)
			},
			// 关闭
			close() {
				this.animation=false
				setTimeout(()=>{
					this.isShow=false
				},30)
				
			},
			// 初始化
			init(opt){
				Object.assign(this.$data,opt)
			},
			// 取消按钮点击事件
			cancleTap(){
				if(this.cancleFcn){
					let rst=this.cancleFcn();
					if(typeof rst =='boolean' && !rst){
						
					}else{
						this.close();
					}
				}else{
					this.close();
				}
				
			},
			// 确认按钮点击事件
			confirmTap(){
				if(this.confirmFcn){
					let rst=this.confirmFcn();
					if(typeof rst =='boolean' && !rst){
						
					}else{
						this.close();
					}
				}else{
					this.close();
				}
			},
			tapMask(){
				if(this.maskClose){
					this.close();
				}
			}
		},
	}
</script>

<style lang="less">
	.poupMask {
		position: fixed;
		width: 100%;
		height: 100%;
		top: -100%;
		left: 0;
		z-index: 999;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all .3s;
		.poupBox {
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			border-radius: 20upx;
			padding: 34upx 50upx;
			width: 80%;

			.poupTitle {
				font-size: 32rpx;
				font-weight: bold;
				color: #07080d;
				text-align: center;
				margin-bottom: 30upx;
			}

			.poupContent {
				font-size: 28rpx;
				color: #5d5d5d;
				word-break: break-all;
				// text-align: center;
			}
			.poupCntSlot{
				overflow: scroll;
			}
			.btnGroun {
				display: flex;
				margin-top: 40upx;
				justify-content: space-around;
				button {
					border-radius: 20upx;
					border: solid 3rpx #b2b2bc;
					font-size: 26rpx;
					color: #7f7f87;
					width: 40%;
				}
				.closeBtn{
					background-color: #FFFFFF;
				}
				.confirmBtn{
					background-color: #ffb423;
					border: 3upx solid  #ffb423;
					color: #07080d;
				}
				button:after {
					border: none;
				}
			}
		}
		
		
	}
	.ani{
		top: 0;
	}
</style>
